<template>
	<view class="modal" @touchmove.stop.prevent="moveHandle" >
		<view class="window">
			<view class="successImg">
				<image class="img" src="https://maywork.oss-cn-shanghai.aliyuncs.com/static/pop-title.png" mode="widthFix"></image>
			</view>
			<view class="successText">
				5月22日-6月20日解锁活动红途步履，员工需通过同步微信运动步数解锁站点，每人每天最高有效步数为 5000 步，超过也按5000步计算（例如职工5月22日实际步数为7000步，5月23日实际步数为2000步，那么5月22日按5000步计算，5月23日按2000步计算）在活动期间的总步数每累积20000步可解锁一个地点，解锁后可观看对应解锁地点的建筑图文介绍，每日步数达5000步和解锁一个站点均可获得幸福值奖励。
				5月29日-6月4日解锁活动工学识途，员工每天登录回答一道和百年工运相关的问题，答对即可获得幸福值奖励。  
				6月5日-6月11日解锁活动光影铸魂，每天参与观看红色工运视频学习，观看即可获得幸福值奖励。
				6月12日-6月18日解锁活动图绎星火，每天参与小游戏，答对即可获得幸福值奖励。
			</view>
			<view class="closeImg" @click="handleClose">
				<image class="img" src="https://maywork.oss-cn-shanghai.aliyuncs.com/static/pop-close.png" mode="widthFix"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		props:['text'],
		methods:{
			moveHandle() {
				
			},
			handleClose(){
				this.$emit('next')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal{
		z-index: 99999;
		position: fixed;
		top:0;
		left:0;
		bottom: 0;
		right: 0;
		background:rgba($color: #000000, $alpha: .6);
		display: flex;
		align-items: center;
		justify-content: center;
		.window{
			border: 14rpx solid #E9412C;
			width: 82%;
			min-height: 700rpx;
			// background: white;
			background: #FFF0C8;
			border-radius: 20rpx;
			position: relative;
			animation:show 1s 1;
			.successText{
				margin-top: 60rpx;
				padding:20rpx;
				// text-align: center;
				// color:#2AB46E ;
				// font-size: 60rpx;
				// font-weight: bold;
				
				font-family: PingFang SC;
				font-size: 28rpx;
				font-weight: normal;
				line-height: 48rpx;
				letter-spacing: normal;
				/* text/文本 */
				color: #6C6262;
			}
		}
		@keyframes show
		{
			from {opacity:0}
			to {opacity:1}
		}
		
		.successImg{
			position: absolute;
			height: 200rpx;
			// background: red;
			top:-34rpx ;
			width: 100%;
			display: flex;
			justify-content: center;
			
			.img{
				width: 300rpx;
			}
		}
		
		.closeImg{
			position: absolute;
			height: 200rpx;
			// background: red;
			bottom:-140rpx ;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			
			.img{
				width: 80rpx;
			}
		}
	}
	.determinateText{
		padding: 20rpx;
		.title{
			font-weight: bold;
			font-size: 35rpx;
		}
		.subTitle{
			font-size: 30rpx;
		}
	}
	
	.btnBox{
		margin: 70rpx 0;
		display: flex;
		justify-content: center;
		.btn{
			width: 220rpx;
			height: 70rpx;
			border-radius: 35rpx;
			background: #EE3435;
			color: white;
			text-align: center;
			line-height: 70rpx;
			&:active{
				opacity: .8;
			}
		}
	}
</style>
